<template>
  <div class="myprofile">
    <div class="profileTop">
      <ul>
        <li>
          <el-upload class="avatar-uploader" action="#" :before-upload="beforeAvatarUpload">
            <img class="iconUrl" :src="userInfo.iconUrl" alt="iconUrl">
          </el-upload>
          <div class="nickinfo">
            <span>{{hours | capitalize}}</span>
            <span v-show="isedit==5 || isedit==2">{{userInfo.nickName}}</span>
            <div v-show="isedit==1">
              <el-input placeholder="请输入新昵称" v-model="userInfo.nickName"></el-input>
            </div>
            <el-button v-show="isedit==1" icon="el-icon-check" circle @click="savenick"></el-button>&nbsp;&nbsp;
            <i @click="edit(1)" class="el-icon-edit"></i>
          </div>
        </li>
        <li>
          <router-link to="/Personal/Ticketlist?childvalue=3">
            <div class="lititle">我的券包</div>
            <div class="linum">
              <span>{{vouchernum}}</span>
              <span>张</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <div class="lititle">我的金币</div>
            <div class="linum">
              <span>{{goldnum}}</span>
              <span>个</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <div class="lititle">账户余额</div>
            <div class="linum">
              <span>{{balance | formatbalance}}</span>
              <span>元</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="profilecontent">
      <div class="child">
          <router-view></router-view>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "myprofile",
  data() {
    return {
      hours: "",
      _nickName: "",
      radio: 1,
      balance:0,
      goldnum:0,
      isedit: 5,
      vouchernum: 0,
      vouchelist:[],
      userInfo: {}
    };
  },
  computed: {
    ...mapState(["token", "userId"])
  },
  watch: {
    radio: function() {
      this.userInfo.sex = this.radio;
      this.isedit = 5;
      this.saveinfo();
    }
  },
  filters: {
    capitalize: function(val) {
      if (5 < val && val <= 8) {
        return "早上好，";
      } else if (val > 8 && val <= 11) {
        return "上午好，";
      } else if (val > 11 && val <= 13) {
        return "中午好，";
      } else if (val > 13 && val <= 17) {
        return "下午好，";
      } else if (val > 17 && val <= 4) {
        return "晚上好，";
      }
    },
    formatbalance:function(val){
      let _val =val.toFixed(2);
      return _val
    }
  },
  methods: {
    //初始化
    init() {
      this.getuserinfo();
      for (let i = 0; i < 3; i++) {
        this.getnum(i);
      }
    },
    //获取券我数量
    getnum(val) {
      let _Url = "",
        _parms = {},
        _method='get',
        _value = "",
        _this = this;
      if (val == 1) {
        _parms = {
          userId: this.userId,
          page: 1,
          rows: 1,
          isUsed: 0
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url ="/api/website/orderCoupon/listForSendNew?" + _value;
      } else if (val == 2) {
        _Url ="/api/website/account/getUserAccount";
        _method="post";
      }else if(val ==3){

      }
      this.$axios({
        url: _Url,
        method: _method,
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          if(val ==1){
            _this.vouchernum = res.data.data.total;
          }else if(val ==2){
            _this.balance=res.data.data.userAmount;
            _this.goldnum=res.data.data.gold;
          }
          
        }
      });
    },
    //获取用户信息
    getuserinfo() {
      let _Url ="/api/website/user/approve/get/" + this.userId;
      this.$axios.get(_Url).then(res => {
        if (res.data.code == 0) {
          this.userInfo = res.data.data;
          this.radio = res.data.data.sex;
        }
      });
    },
    //编辑用户信息
    edit(val) {
      this.isedit = val;
      if (val == 1) {
      } else if (val == 2) {
      }
    },
    //保存修改昵称
    savenick() {
      this.isedit = 5;
      this.saveinfo();
    },
    //图片上传
    beforeAvatarUpload(file) {
      const loading = this.$loading({
        lock: true,
        text: "图片上传中，请稍候。。。",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 500kb!");
      } else {
        let form = new FormData(),
          _this = this;
        form.append("file", file);
        form.append("userName", "13971489895");
        this.$axios
          .post("/api/img/uploadMp4", form, {
            headers: {
              Authorization: this.token
            }
          })
          .then(res => {
            if (res.data.code == 0) {
              loading.close();
              this.userInfo.iconUrl = res.data.data.smallPicUrl;
              this.saveinfo();
            }
          });
      }
    },
    //保存修改
    saveinfo() {
      let _parms = {},
        _value = "",
        _Url = "";
      _parms = {
        sex: this.userInfo.sex,
        nickName: this.userInfo.nickName,
        id: this.userInfo.id,
        iconUrl: this.userInfo.iconUrl,
        openId: this.userInfo.openId
      };
      for (var key in _parms) {
        _value += key + "=" + _parms[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      _Url ="/api/website/user/update?" + _value;

      this.$axios({
        url: _Url,
        method: "POST",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.$message.success("操作成功");
          this.getuserinfo();
        }
      });
    }
  },
  created() {
    let myDate = new Date();
    this.hours = myDate.getHours();
    console.log("myportchildvalue:", this.childvalue);
    if (this.userId) {
      this.init();
    }
  }
};
</script>

<style lang="less">
.myprofile {
  margin: 0 auto;
  .profileTop {
    display: table;
    padding: 30px 0;
    width: 100%;
    background: #fff;
    ul {
      li {
        text-align: center;
        width: 20%;
        float: left;
        height: 132px;
        .avatar-uploader {
          float: left;
          width: 132px;
          margin-left: 30px;
          img {
            width: 132px;
            height: 132px;
            border-radius: 50%;
          }
        }
        .nickinfo {
          float: left;
          font-size: 16px;
          // height: 100%;
          margin-top: 10%;
          margin-left: 15%;
          span:nth-child(2) {
            font-weight: 700;
          }
        }
        .lititle {
          margin-top: 25px;
        }
        .linum {
          font-weight: 600;
          font-size: 12px;
          height: 60px;
          line-height: 60px;
          span:nth-child(1) {
            font-size: 30px;
          }
        }
      }
      li:nth-child(1) {
        width: 40%;
      }
      li:nth-child(2) {
        .linum {
          span {
            color: #fc463f;
          }
        }
      }
      li:nth-child(3) {
        .linum {
          span {
            color: #5db423;
          }
        }
      }
      li:nth-child(4) {
        .linum {
          span {
            color: #ff9c00;
          }
        }
      }
    }
  }
  .profilecontent{
    margin-top: 20px;
    width: 100%;
    background: #fff;
  }
}
</style>


